

Ext.onReady(function() {


    // create the Data Store
    
    var ownerStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.findOwners),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','displayableName','address','city']}) 
	});     
	
    var vetStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.getVets),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','displayableName','address','city']}) 
	});     
	
    var specialtyStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.getSpecialties),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','name']}) 
	});     
    var petTypeStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.getPetTypes),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','name']}) 
	});     
	
 
    var ownerGrid = new Ext.grid.GridPanel({
        id:'ownerGrid',
              columns: [
            {id:'id',header: "Id", width:10, sortable: false, dataIndex: 'id',hidden:true},
            {header: "Name", width: 290, sortable: true, dataIndex: 'displayableName'},
            {header: "Address", width: 290, sortable: true, dataIndex: 'address'},
            {header: "City", width: 290, sortable: true, dataIndex: 'city'}
        ],/*
    view: new Ext.grid.GroupingView({
        forceFit:true,
        // custom grouping text template to display the number of items per group
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),*/
                tbar: [
            { text: "Load", handler: function() {     ownerGrid.getStore().load({params:['']});
 }},
            { text: "Remove", handler: function() { ownerGrid.getStore().removeAll(); }},
            "-"
            /*
            { text: "Add User", handler: addRecord},
            { text: "Insert User", handler: insertRecord},
            { text: "Remove User", handler: removeRecord},
            "->",
            { text: "Example", disabled: true, id: "example" }
            */
		],    
        loadMask: true,
        stripeRows: true,
        title:'Owners',
        store: ownerStore
    });
    


	new Ext.Viewport({
	    layout: 'border',
	    defaults: {
	        activeItem: 0
	    },
	    items: [{
	        region: 'north',
	        html: '<h1 class="x-panel-header">Petstore</h1>',
	        autoHeight: true,
	        border: false,
	        margins: '0 0 5 0'
	    }, {
	        region: 'west',
	        collapsible: true,
	        title: 'Navigation',
	        xtype: 'treepanel',
	        width: 200,
	        autoScroll: true,
	        split: true,
	        loader: new Ext.tree.TreeLoader(),
	        root: new Ext.tree.AsyncTreeNode({
	            expanded: true,
	            children: [{
	                text: 'Menu Option 1',
	                leaf: true
	            }, {
	                text: 'Menu Option 2',
	                leaf: true
	            }, {
	                text: 'Menu Option 3',
	                leaf: true
	            }]
	        }),
	        rootVisible: false,
	        listeners: {
	            click: function(n) {
	                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
	            }
	        }
	    }, {
	        region: 'center',
	        xtype: 'tabpanel',
	        items: [{
	            title: 'Welcome',
//	            html: 'Welcome to the Pet Clinic.'
				autoLoad: {url:'./welcome.jsp'}
	        },ownerGrid]
	    }, {
	        region: 'south',
	        title: 'Information',
	        collapsible: true,
	        html: 'Information goes here',
	        split: true,
	        height: 100,
	        minHeight: 100
	    }]
	});

	Ext.get('loading').hide(true);

});